<template>
    <div class="search">
        <div class="search-title" v-if="msg">搜索"{{ msg }}"</div>
        <div class="search-wrap">
            <div class="search-list">
                <div class="search-item" v-for="item in gameList" :key="item.title+item.id" @click="goDetailPage(item)">
                    <div class="search-item-hd">
                        <div class="search-game-info">
                            <div class="search-game-img">
                                <img class="img1" :src="item.drawingUrl" />
                            </div>
                            <div class="search-game-title">
                                <span class="search-game-name">{{ item.title }}</span>
                                <span class="search-game-desc">收藏: {{ item.collectionNum }}个</span>
                                <span class="search-game-desc">评论: {{ item.commentNum }}条</span>
                                <span class="search-game-desc">评分: {{ Math.floor(Math.random() * 10 + 1) }}分</span>
                            </div>
                        </div>
                        <div class="search-game-price">{{ item.price ? `¥${item.price}` : '免费' }}</div>
                    </div>
                    <div class="search-item-bd">
                        <div class="search-game-tips">{{ item.introduce }}</div>
                        <img :src="item.backgroundUrl" class="img2" />
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<script setup>
import { useRoute } from 'vue-router'
import { ref, watch, onMounted } from 'vue'
import { getGameList } from '../api'
import { useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
watch(() => route.query.title, (val) => {
    msg.value = val
    getList()
})
const gameList = ref([])
const msg = ref(route.query.title)
const goDetailPage = ({ id }) => {
    router.push({
        path: `/detail/${id}?name=${name}`
    })
}
const getList = async () => {
    try {
        const res = await getGameList({
            pageNo: 1, 
            size: 20,
            title: msg.value
        })
        if (!res.code) {
            gameList.value = res.data.records || []
        }
        console.log('getGameList: ', res)
    } catch (error) {
        
    }
}
onMounted(() => {
    if (msg.value) {
        getList()
    }
})
</script>
<style lang="scss" scoped>
.search {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    .search-title {
        font-size: 28px;
        color: #23272a;
        font-weight: 700;
    }
    .search-wrap {
        margin-top: 20px;
        .search-list {
            overflow: hidden;
            margin: 0 -5px;
        }
        .search-item {
            float: left;
            width: 350px;
            border: 1px solid #ccc;
            border-radius: 10px;
            margin: 0 5px 10px;
            box-sizing: border-box;
            padding: 10px;
            position: relative;
            cursor: pointer;
            .search-item-hd {
                display: flex;
                .search-game-info {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    .search-game-img {
                        width: 70px;
                        height: 70px;
                        border-radius: 8px;
                        overflow: hidden;
                        margin-right: 15px;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .search-game-title {
                        display: flex;
                        flex-direction: column;
                        .search-game-name {
                            font-size: 14px;
                            color: #444;
                            margin-bottom: 5px;
                        }
                    
                        .search-game-desc {
                            font-size: 12px;
                            color: #b9b7b7;
                        }
                    }
                }
                .search-game-price {
                    width: 60px;
                    font-size: 12px;
                    text-align: right;
                }
            }
            .search-item-bd {
                margin-top: 20px;
                .search-game-tips {
                    font-size: 14px;
                    margin-bottom: 15px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
                .img2 {
                    display: block;
                    width: 100%;
                    height: 100px;
                    object-fit:cover;
                }
            }
        }
    }
}
</style>